<template>
  <div class="page">
    <div class="video-search" style="display: inline-block;">
      <Button type="warning" style="float: left; margin-left: -200px;" size="large" @click="addModalShow">投稿作品</Button>
      <Modal v-model="modal.addModal" title="投稿作品" @on-ok="uploadVideo" @on-cancel="resetFormData">
        <Row style="font-size:15px":gutter="5">
          <Col span="4" style="text-align: center;line-height: 35px">视频标题：</Col>
          <Col span="8">
            <Input placeholder="视频标题" clearable v-model="formData.uploadTitle"></Input>
          </Col>
        </Row>
        <br>
        <Row style="font-size:15px":gutter="5">
          <Col span="4" style="text-align: center;line-height: 35px">视频描述：</Col>
          <Col span="8">
            <Input placeholder="视频描述" clearable v-model="formData.uploadIntroduction"></Input>
          </Col>
        </Row>
        <br>
        <Row style="font-size:15px":gutter="5">
          <Col span="4" style="text-align: center;line-height: 35px">分类：</Col>
          <Col span="8">
            <Cascader :data="formData.classificationDropdownData" trigger="hover" v-model="formData.uploadClassificationId"></Cascader>
          </Col>
        </Row>
        <br>
        <Row style="font-size:15px":gutter="5">
          <Col span="4" style="text-align: center;line-height: 35px">上传视频：</Col>
          <Col span="20">
            <Upload type="drag" :before-upload="handleUpload" action="" show-upload-list>
              <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或拖拽上传视频</p>
              </div>
            </Upload>
            <div v-if="formData.uploadFile">{{formData.uploadFile.name}}<Progress :percent="formData.percentNum"></Progress></div>
          </Col>
        </Row>
      </Modal>
      <Input placeholder="请输入视频标题" style="width: 300px;" clearable autofocus></Input>
      <Button type="info" style="margin-left:10px" @click="searchVideo(0,10)">查询</Button>
    </div>
    <Divider></Divider>
    <div>
      <List item-layout="vertical" style="width: 900px;padding: 30px;">
        <ListItem v-for="item in respVideoData.data" :key="item.title" class="video-list-item">
          <ListItemMeta :title="item.title" :description="item.introduction" style="margin: 5px"/>
          <template slot="action">
            <li style="margin: 5px">
               <Button type="error" size="small" @click="batchDeleteVideos(item)"><Icon type="ios-trash" />删除</Button>
              <a @click="toVideoDetail(item)" style="margin-left: 10px">浏览视频</a>
              <span v-if="item.auditState == 0" style="color: #dd4b39;margin-left: 10px">未审核</span>
              <span v-if="item.auditState == 1" style="color: #dd4b39;margin-left: 10px">已通过审核</span>
              <span v-if="item.auditState == -1" style="color: #dd4b39;margin-left: 10px">未通过审核</span>
            </li>
          </template>
          <template slot="extra">
            <img :src="item.previewImageUrl" style="width: 200px;">
          </template>
        </ListItem>
      </List>
      <Page :total="respVideoData.total" show-sizer show-elevator show-total @on-change="getCurrentPage"
            @on-page-size-change="getPageCount" style="text-align: center"></Page>
    </div>
  </div>
</template>

<script>
    import VideoService from "../services/VideoService";
    import cookies from 'js-cookie';
    import ClassificationService from "../services/ClassificationService";
    export default {
      name: "VideoManageComponent",
        data () {
          return {
            videoService: null,
            classificatoinService:null,
            uploadTimer:null,
            formData:{
              searchTitle:"",
              currentPage:0,
              pageCount:10,
              uploadTitle:"",
              uploadIntroduction:"",
              uploadClassificationId:[],
              uploadFile:null,
              deleteId:null,
              percentNum:0,
              classificationDropdownData: []
            },
            modal:{
              addModal:false
            },
            respVideoData:{data:[], total:null},
          }
        },
        created(){
            this.init();
        },
        methods:{
            init(){
              this.videoService = new VideoService(this);
              this.classificatoinService = new ClassificationService(this);
              this.searchVideo(0,10);
              this.getClassDropdownData();
            },
            searchVideo(currentPage, pageCount){
              let params = {
                "title": this.formData.searchTitle,
                "orderType": 0,
                "transState": 1,
                "userId": cookies.get("UserId"),
                "page":{"start":currentPage+"", "count":pageCount+""}
              };
              this.videoService.searchVideo(params, function (_this, data) {
                _this.respVideoData.data = data.data;
                _this.respVideoData.total = data.page.total;
              });
            },
            uploadVideo(){
              let params = new FormData();
              params.append("title", this.formData.uploadTitle);
              params.append("classificationId", this.formData.uploadClassificationId[1]);
              params.append("introduction", this.formData.uploadIntroduction);
              params.append("userId", cookies.get("UserId"));
              params.append("videoOriFile", this.formData.uploadFile);
              console.log(params.get("videoOriFile"));
              this.videoService.uploadVideo(params,function (_this, data) {
                _this.$Message.success("投稿成功");
              });
              this.formData.percentNum = 0;
              clearInterval(this.uploadTimer);
            },
            batchDeleteVideos(item){
              let videoIds = [];
              videoIds.push(item.id);
              this.videoService.batchDeleteVideos(videoIds, function (_this, data) {
                _this.$Message.success("删除成功");
              });
              this.searchVideo(0,10);
            },
            getClassDropdownData(){
              this.classificatoinService.getAllClass(function (_this, data) {
                data.data.forEach(function (classifcationsDto) {
                  let classification = {"value":classifcationsDto.id, "label":classifcationsDto.classificationName, "children":[]};
                  classifcationsDto.classificationsDtos.forEach(function (childClassDto) {
                    let childClassification = {"value":childClassDto.id, "label":childClassDto.classificationName};
                    classification.children.push(childClassification);
                  });
                  _this.formData.classificationDropdownData.push(classification);
                })
                console.log(_this.formData.classificationDropdownData);
              })
            },
            toVideoDetail(item){
              let routeUrl = this.$router.resolve({
                path: "/videoDetail",
                query: {videoId:item.id}
              });
              window.open(routeUrl.href, '_blank');
            },
            handleUpload (file) {
              this.formData.uploadFile = file;
              this.uploadTimer = setInterval(this.uploadProgress, 1000);
              return false;
            },
            uploadProgress(){
                let num = this.formData.percentNum;
                if((num += (Math.random().toFixed(1)*50)) <=100 )
                  this.formData.percentNum = num;
                else{
                  this.formData.percentNum = 100;
                }
            },
            addModalShow(){
              this.modal.addModal=true;
            },
            resetFormData(){
              this.formData.uploadTitle = "";
              this.formData.uploadIntroduction = "";
              this.formData.uploadClassificationId=[];
              this.formData.uploadFile = null;
              this.formData.percentNum = 0;
              clearInterval(this.uploadTimer);
            },
            getCurrentPage(num){
              this.formData.currentPage = num-1;
              this.searchVideo(this.formData.currentPage, this.formData.pageCount);
            },
            getPageCount(pageSize){
              this.formData.pageCount = pageSize;
              this.searchVideo(this.formData.currentPage, this.formData.pageCount);
            },

        }
    }
</script>

<style scoped>
  .page {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .video-list-item :hover{
    -webkit-transform:translateY(-0.5px);
    background-color: #eeeeee;
    border-radius: 5px;
    transition: all 0.4s ease-in-out;
    color:#dd4b39;
  }
</style>
